<!--
 * @Author: fisher
 * @Date: 2024-02-21 14:27:35
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-02-21 17:41:20
 * @FilePath: \allfront\src\modules\cloud\serviceInfo\index.vue
 * @Description: 
-->
<template>
  <div v-loading="loading">
    <el-card class="box-card">
      <div class="title">CPU</div>
      <div class="content">
        <div class="item">
          <div class="item_title">型号</div>
          <div class="item_value">{{ serviceInfo.cpu.name }}</div>
        </div>
        <div class="item">
          <div class="item_title">核心数</div>
          <div class="item_value">{{ serviceInfo.cpu.cores }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title">GPU</div>
      <div class="content">
        <div class="item">
          <div class="item_title">型号</div>
          <div class="item_value">{{ serviceInfo.gpu.name }}</div>
        </div>
        <div class="item">
          <div class="item_title">显存大小</div>
          <div class="item_value">
            {{ (serviceInfo.gpu.memoryTotal / 1024).toFixed(2) }} GB
          </div>
        </div>
        <div class="item">
          <div class="item_title">已使用显存</div>
          <div class="item_value">
            {{ (serviceInfo.gpu.memoryUsed / 1024).toFixed(2) }} GB
          </div>
        </div>
        <div class="item">
          <div class="item_title">剩余显存</div>
          <div class="item_value">
            {{ (serviceInfo.gpu.memoryFree / 1024).toFixed(2) }} GB
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title">CPU</div>
      <div class="content">
        <div class="item">
          <div class="item_title">型号</div>
          <div class="item_value">{{ serviceInfo.cpu.name }}</div>
        </div>
        <div class="item">
          <div class="item_title">核心数</div>
          <div class="item_value">{{ serviceInfo.cpu.cores }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title">内存</div>
      <div class="content">
        <div class="item">
          <div class="item_title">内存总容量</div>
          <div class="item_value">
            {{ (serviceInfo.memory.total / (1024 * 1024 * 1024)).toFixed(2) }}
            GB
          </div>
        </div>
        <div class="item">
          <div class="item_title">已使用大小</div>
          <div class="item_value">
            {{ (serviceInfo.memory.used / (1024 * 1024 * 1024)).toFixed(2) }} GB
          </div>
        </div>
        <div class="item">
          <div class="item_title">剩余大小</div>
          <div class="item_value">
            {{ (serviceInfo.memory.free / (1024 * 1024 * 1024)).toFixed(2) }} GB
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="title">系统信息</div>
      <div class="content">
        <div class="item">
          <div class="item_title">系统类型</div>
          <div class="item_value">{{ serviceInfo.os.name }}</div>
        </div>
        <div class="item">
          <div class="item_title">系统版本</div>
          <div class="item_value">{{ serviceInfo.os.distro }}</div>
        </div>
        <div class="item">
          <div class="item_title">系统架构</div>
          <div class="item_value">{{ serviceInfo.os.arch }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useAxios } from '@/hooks/useAxios';
const { get, loading } = useAxios();
const serviceInfo = reactive({
  gpu: {
    name: '',
    memoryTotal: 0,
    memoryUsed: 0,
    memoryFree: 0,
  },
  cpu: {
    name: '',
    cores: 0,
  },
  memory: {
    total: 0,
    used: 0,
    free: 0,
  },
  os: {
    name: '',
    distro: '',
    arch: '',
  },
});
get('/index/getSysInfo').then(res => {
  Object.assign(serviceInfo, res.data);
  // console.log(serviceInfo, 'serviceInfo');
});
</script>
<style scoped>
.box-card {
  width: 480px;
}
</style>
